<template>
	<view class="authe-pages">
		<view class="tips-item">
			<view class="iconfont icon-a-jinggao1"></view>
			<view class="tips">如有问题请拨打<text style="margin-left: 10rpx;" @click="call(callPhone)">{{callPhone}}</text>
			</view>
		</view>
		<view class="info-block">
			<view class="form-item">
				<view class="form-title">
					<view class="must">*</view>
					<view class="title">当前承租人姓名</view>
				</view>
				<input placeholder="请输入当前承租人姓名" v-model="form.userName" type="text" maxlength="5" class="form_crl" />
			</view>
			<view class="form-item">
				<view class="form-title">
					<view class="must">*</view>
					<view class="title">当前承租人身份证号</view>
				</view>
				<input placeholder="请输入当前承租人身份证号" v-model="form.idCard" type="idcard" maxlength="18" class="form_crl" />
			</view>
			<view class="form-item">
				<view class="form-title">
					<view class="must">*</view>
					<view class="title">租赁证编号</view>
				</view>
				<view class="form-control-group">
					<picker mode="selector" :range="houseTypes" range-key="label" @change="onHouseTypeChange"
						class="house-type-picker">
						<view class="picker-text">{{ selectedHouseType.label || '请选择' }}</view>
					</picker>
					<input placeholder="请输入编号" v-model="form.leaseCertificateNumber" type="number" maxlength="10"
						class="form_crl input-number" @input="onInputChange" />
				</view>
				<view class="full-number" v-if="fullCertificateNumber">
					完整编号：{{ fullCertificateNumber }}
				</view>
			</view>
		</view>
		<view class="btn normal" @click="submit">绑定房屋</view>
	</view>
</template>

<script>
	import {
		validate,
		validateIdCard
	} from '@/util/validate.js';
	import {
		getFwInfoApi,
		getSuspiciousPhone
	} from '@/api/authentication.js'
	import {
		setStorage
	} from '@/util/auth.js'

	export default {
		data() {
			return {
				form: {
					userName: '',
					idCard: '',
					leaseCertificateNumber: ''
				},
				callPhone: '',
				// 房屋类型选项
				houseTypes: [{
						label: '廉租房',
						value: 'L'
					},
					{
						label: '公租房',
						value: 'G'
					},
					{
						label: '直管公房',
						value: 'Z'
					}
				],
				selectedHouseType: {}, // 当前选中的房屋类型
				fullCertificateNumber: '', // 完整编号
				rule: {
					userName: {
						name: '承租人姓名',
						required: true
					},
					idCard: {
						name: '身份证号',
						required: true
					},
					leaseCertificateNumber: {
						name: '租赁证编号',
						required: true
					}
				},
				status: 1
			}
		},
		methods: {
			// 房屋类型选择变化
			onHouseTypeChange(e) {
				this.selectedHouseType = this.houseTypes[e.detail.value];
				this.updateFullNumber();
			},
			// 输入框内容变化
			onInputChange(e) {
				this.form.leaseCertificateNumber = e.detail.value;
				this.updateFullNumber();
			},
			// 更新完整编号
			updateFullNumber() {
				// 清空之前的完整编号
				this.fullCertificateNumber = '';

				// 如果有选择房屋类型和输入编号，则拼接
				if (this.selectedHouseType.value && this.form.leaseCertificateNumber) {
					this.fullCertificateNumber = this.selectedHouseType.value + this.form.leaseCertificateNumber;
				}
			},
			submit() {
				// 在提交前确保使用完整编号
				if (this.fullCertificateNumber) {
					this.form.leaseCertificateNumber = this.fullCertificateNumber;
				}

				if (validate(this.form, this.rule)) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					getFwInfoApi(this.form).then((res) => {
						if (res.list.length > 0) {
							let data = res.list[0]
							if (data.wechatPhoneNumber) {
								this.navigate('/page_pack/authentication/verify_phone?id=' + data.id + '&phone=' +
									data.wechatPhoneNumber)
							} else {
								this.navigate('/page_pack/authentication/result?type=1')
								setStorage('houseInfo', res)
								setStorage('formInfo', this.form)
							}
						} else {
							this.navigate('/page_pack/authentication/result?type=2')
							setStorage('houseInfo', res)
						}
					});
				}
			},
			getCall() {
				getSuspiciousPhone({
					dicType: "yydh"
				}).then(res => {
					console.log(res)
					this.callPhone = res[0].value
				})
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			navigate(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		onLoad() {
			this.getCall()
		},
		onShow(){
			// 重置房屋类型选择和完整编号
			    this.selectedHouseType = {};
			    this.fullCertificateNumber = '';
			    this.form.leaseCertificateNumber = '';
		}
	}
</script>

<style lang="scss" scoped>
	.authe-pages {
		padding: 30rpx;

		.tips-item {
			background-color: $error-background;
			color: $theme-color;
			padding: 40rpx 30rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;

			.iconfont {
				margin-right: 20rpx;
			}
		}

		.info-block {
			background-color: #fff;
			padding: 30rpx;
			margin-top: 30rpx;
			border-radius: 30rpx;

			.form-item:last-child {
				border-bottom: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}

			.form-item {
				border-bottom: 1px solid #f7f7f7;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;

				.form-title {
					display: flex;
					align-items: center;

					.must {
						color: $theme-color;
					}

					.title {
						font-size: 30rpx;
					}
				}

				.form_crl {
					margin-top: 30rpx;
				}

				/* 新增样式 */
				.form-control-group {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					.house-type-picker {
						width: 140rpx;
						border: 1rpx solid #e5e5e5;
						border-radius: 8rpx;
						padding: 7rpx;
						background-color: #f8f8f8;
						margin-right: 20rpx;

						.picker-text {
							font-size: 28rpx;
							color: #333;
							display: flex;
							justify-content: center;
							/* 水平居中 */
							align-items: center;
							/* 垂直居中（如需） */
							width: 100%;
							/* 确保宽度占满父容器 */
						}
					}

					.input-number {
						flex: 1;
					}
				}

				.full-number {
					margin-top: 10rpx;
					color: #666;
					font-size: 24rpx;
				}
			}
		}

		.btn {
			width: 100%;
			border-radius: 20rpx;
			height: 90rpx;
			margin-top: 30rpx;
		}
	}
</style>